import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
import {addUnit, createNamespace} from '../utils';
import {inherit} from '../utils/functional'; // Types

var _createNamespace = createNamespace('loading'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

function LoadingIcon(h, props) {
    if (props.type === 'spinner') {
        var Spin = [];

        for (var i = 0; i < 12; i++) {
            Spin.push(h("i"));
        }

        return Spin;
    }

    return h("svg", {
        "class": bem('circular'),
        "attrs": {
            "viewBox": "25 25 50 50"
        }
    }, [h("circle", {
        "attrs": {
            "cx": "50",
            "cy": "50",
            "r": "20",
            "fill": "none"
        }
    })]);
}

function LoadingText(h, props, slots) {
    if (slots.default) {
        var style = props.textSize && {
            fontSize: addUnit(props.textSize)
        };
        return h("span", {
            "class": bem('text'),
            "style": style
        }, [slots.default()]);
    }
}

function Loading(h, props, slots, ctx) {
    var color = props.color,
        size = props.size,
        type = props.type;
    var style = {
        color: color
    };

    if (size) {
        var iconSize = addUnit(size);
        style.width = iconSize;
        style.height = iconSize;
    }

    return h("div", _mergeJSXProps([{
        "class": bem([type, {
            vertical: props.vertical
        }])
    }, inherit(ctx, true)]), [h("span", {
        "class": bem('spinner', type),
        "style": style
    }, [LoadingIcon(h, props)]), LoadingText(h, props, slots)]);
}

Loading.props = {
    color: String,
    size: [Number, String],
    vertical: Boolean,
    textSize: [Number, String],
    type: {
        type: String,
        default: 'circular'
    }
};
export default createComponent(Loading);